'use client';

import Link from 'next/link';
import Image from 'next/image';
import {
	Carousel,
	CarouselContent,
	CarouselItem,
	CarouselNext,
	CarouselPrevious
} from '@/components/ui/carousel';
import type { GameDetailProduct } from '@/types/response/store/game';

export default function GameProductCarousel({ products }: { products: GameDetailProduct[] })
{
	if (products.length === 0) {
		return null;
	}

	return (
		<section>
			<h2 className="mb-3 text-lg font-bold">이 게임의 상품</h2>
			<Carousel opts={{ align: 'start', loop: products.length > 2 }} className="w-full">
				<CarouselContent>
					{products.map(p => (
						<CarouselItem key={p.id} className="basis-1/2 sm:basis-1/3 lg:basis-1/4">
							<Link
								href={`/store/${p.id}`}
								className="flex h-full flex-col overflow-hidden rounded-lg border border-[var(--border-default)] bg-[var(--bg-elevated)] transition hover:shadow-md"
							>
								<div className="relative aspect-square w-full overflow-hidden bg-[var(--bg-elevated)]">
									{p.thumbnail ? (
										<Image src={p.thumbnail} alt={p.name} fill unoptimized sizes="200px" className="object-cover" />
									) : (
										<span className="flex size-full items-center justify-center text-xl text-[var(--text-secondary)]">🎁</span>
									)}
								</div>
								<div className="flex flex-1 flex-col gap-1 p-2">
									<p className="line-clamp-2 text-xs">{p.name}</p>
									<div className="mt-auto flex items-center gap-1 text-sm font-semibold">
										{p.salePrice < p.price && (
											<span className="text-[11px] text-[var(--text-muted)] line-through">{p.price.toLocaleString()}</span>
										)}
										<span>{p.salePrice.toLocaleString()}P</span>
									</div>
								</div>
							</Link>
						</CarouselItem>
					))}
				</CarouselContent>
				<CarouselPrevious aria-label="이전 상품" className="left-1 size-8 border-0 bg-black/50 text-white hover:bg-black/70 hover:text-white disabled:hidden" />
				<CarouselNext aria-label="다음 상품" className="right-1 size-8 border-0 bg-black/50 text-white hover:bg-black/70 hover:text-white disabled:hidden" />
			</Carousel>
		</section>
	);
}